<template>
    <div class="email-Activation">
      <div class="email-Activation-header"></div>
      <div class="email-Activation-box">
        <div class="email-Activation-title">Verify Email</div>
        <div class="info">
          An email with a verification link has been sent to <span>{{this.Upemail}}</span>. Please click th email link to activate your account.
        </div>
      </div>
      <button class="btn" @click="VerifyEmail">Sign In</button>
    </div>
</template>

<script type="text/ecmascript-6">
  import {mapGetters} from 'vuex'
  export default {
    computed:{
      ...mapGetters([
        'Upemail',
      ])
    },
    created() {
      console.log(this.Upemail)
    },
    methods:{
      VerifyEmail(){
        this.$router.push({
          path: `/sign-in/`
        });
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"
  .email-Activation
    width: 520px;
    margin auto
    background: $color-white
    color #333
    text-align: center;
    margin-bottom 75px
    .email-Activation-header
      color: #18823a;
      font-size:40px
      margin: 3.5rem auto 3rem;
      text-align center
      background url('meet.jpg') no-repeat center center
      height: 2.5rem;
      background-size auto 100%
    .email-Activation-box
      text-align center
      padding 0 8%
      .email-Activation-title
        font-weight bold
        font-size: 20px;
        margin: 1.5rem 0 1.5rem 0
      .info
        font-size:16px;
        line-height:20px
        margin-bottom:2rem
    .btn
      width:84%;
      height:2.5rem
      line-height 2.5rem
      background #18823a
      font-size:16px
      text-align center
      color:#fff
      border:none
      margin-top: 3rem
</style>
